<template>
    <div class="content">
        <!-- <HeaderNav></HeaderNav> -->
        <div class="flex-between">
        <el-button type="primary" icon="el-icon-plus">新建工作</el-button>
        <div class="flex-between">
            <el-input placeholder="输入工作名称" v-model="queryFileName" clearable></el-input>
            <el-button type="primary" @click="searchFileByName">搜索</el-button>
        </div>
        </div>
        <div class="list-content">
        <el-table :data="tableData" style="width:100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="工作名称" >
            <template slot-scope="scope">
                <img src="../../assets/imgs/file3.png">
                <span style="margin-left: 10px">{{ scope.row.fileName }}</span>
            </template>
            </el-table-column>
            <el-table-column prop="fileSize" label="紧急程度"></el-table-column>
            <el-table-column prop="downloadNumber" label="状态"></el-table-column>
            <el-table-column prop="date" label="操作" width="180">
            <template slot-scope="scope">
                <el-button @click="downLoadFile(scope.row)" type="text" style="color:#00CCCC;">下载</el-button>
            </template>
            </el-table-column>
        </el-table>
        <div class="bottom-content">
            <el-pagination background layout="prev, pager, next" :total="listLength"></el-pagination>
        </div>
        </div>
    </div>
</template>
<script>


// import HeaderNav from '@/components/HeaderNav.vue'
export default{
    name: 'JobView',
    components: {
        // HeaderNav
    },
    data() {
        return {
            queryFileName: '',
            listLength: 0,
            tableData: []
        }
    },
    created() {
    },
    methods: {
        
    }
}
</script>

<style lang="less" scoped>
.content {
    margin: 3.1%;
    .el-button.el-button--primary {
        border-color: #00CCCC;
        background-color: #00CCCC;
    }
    .el-input {
        width: 515px;
        margin-right: 7%;
    }
    .list-content {
        margin-top: 30px;
        img {
        width: 18px;
        height: 18px;
        line-height: 30px;
        }
    }
}
.bottom-content {
    text-align: right;
    margin-top: 27px;
    .el-pagination button,
    .el-pagination li{
        background-color: pink !important;
    }
    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #00CCCC;
    }
}
</style>
